<template>
    <div class="index-wrap">
        <div class="index-left">
            <div class="index-left-block">
                <h2>全部产品</h2>
                <div v-for="product in productList">
                    <h3>{{ product.title}}</h3>
                    <ul>
                        <li v-for="item in product.list">
                            <a :href="item.url">{{item.name}}</a>
                            <span v-if='item.hot' class="hot-tag">Hot</span>
                        </li>
                    </ul>
                    <div v-if='!product.last' class="hr"></div>
                </div>
            </div>
        <div class="index-left-block lastest-news">
            <h2>最新消息</h2>
            <ul>
                <li v-for='item in newList'>
                    <a :href="item.url" class="new-item">{{item.name}}</a>
                </li>
            </ul>
        </div>
      </div>

      <div class="index-right">
        <slide-show :slides="slides" :inv="slideSpeed" @onchange="doSomethingOnSlideChange"></slide-show>

        <div class="index-board-list">
          <!-- class类的拼接 ，根据index设置最后一行边距为0,并且设置不同的背景图-->
            <div class="index-board-item" 
            v-for="(item,index) in boardList"
            :class="[{'line-last':index % 2 !== 0},'index-board-'+item.id]">
                <div class="index-board-item-inner">
                    <h2>{{item.title}}</h2>
                    <p>{{item.description}}</p>
                    <div class="index-board-button">
                        <a href="" class="button">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import slideShow from '../components/slideShow'
    export default {
        components:{
            slideShow
        },
        // 页面创建成功就向数据取值
        created(){
            this.$http.get('api/getNewList')
            .then((res) =>{
              // console.log(res)
                this.newList = res.data
            },(err) => {
                console.log(err);
            })
        },
        methods:{
            doSomethingOnSlideChange(){
                // console.log("doSomethingOnSlideChange翻页了")
            }
        },
        data () {
            return {
                slideSpeed:2000,
                slides:[
                // script中的src需要使用require通过weboack解析地址
                {
                  src: require('../assets/slideShow/pic1.jpg'),
                  title: 'xxx1',
                  href: 'detail/count'
                },
                {
                  src: require('../assets/slideShow/pic2.jpg'),
                  title: 'xxx2',
                  href: 'detail/forecast'
                },
                {
                  src: require('../assets/slideShow/pic3.jpg'),
                  title: 'xxx3',
                  href: 'detail/analysis'
                },
                {
                  src: require('../assets/slideShow/pic4.jpg'),
                  title: 'xxx4',
                  href: 'detail/publish'
                }],
                  boardList: [
                    {
                      title: '开放产品',
                      description: '开放产品是一款开放产品',
                      id: 'car',
                      toKey: 'analysis',
                      saleout: false
                    },
                    {
                      title: '品牌营销',
                      description: '品牌营销帮助你的产品更好地找到定位',
                      id: 'earth',
                      toKey: 'count',
                      saleout: false
                    },
                    {
                      title: '使命必达',
                      description: '使命必达快速迭代永远保持最前端的速度',
                      id: 'loud',
                      toKey: 'forecast',
                      saleout: true
                    },
                    {
                      title: '勇攀高峰',
                      description: '帮你勇闯高峰，到达事业的顶峰',
                      id: 'hill',
                      toKey: 'publish',
                      saleout: false
                    }
                ],
                newList:[],
                productList:{
                    pc:{
                        title:'PC产品',
                        list:[
                        {
                          name: '数据统计',
                          url: 'http://starcraft.com'
                        },
                        {
                          name: '数据预测',
                          url: 'http://warcraft.com'
                        },
                        {
                          name: '流量分析',
                          url: 'http://overwatch.com',
                          hot: true
                        },
                        {
                          name: '广告发布',
                          url: 'http://hearstone.com'
                        }
                        ]
                    },
                    app:{
                        title:'手机应用类',
                        last:true,
                        list:[
                        {
                          name: '91助手',
                          url: 'http://weixin.com'
                        },
                        {
                          name: '产品助手',
                          url: 'http://twitter.com',
                          hot: true
                        },
                        {
                          name: '智能地图',
                          url: 'http://maps.com'
                        },
                        {
                          name: '团队语音',
                          url: 'http://phone.com'
                        }
                        ]
                    }
                }
            }
        }
    };
</script>

<style scoped>
.index-wrap {
    width:1200px;
    margin:0 auto;
    overflow:hidden;
}
.index-left {
    float:left;
    width:300px;
    text-align:left;
}
.index-right {
  float: left;
  width: 900px;
}
.index-left-block {
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
}
.index-left-block .hr {
  margin-bottom: 20px;
}
.index-left-block h2 {
  background: #4fc08d;
  color: #fff;
  padding: 10px 15px;
  margin-bottom: 20px;
}
.index-left-block h3 {
  padding: 0 15px 5px 15px;
  font-weight: bold;
  color: #222;
}
.index-left-block ul {
  padding: 10px 15px;
}
.index-left-block li {
  padding: 5px;
}

.index-board-list {
  overflow: hidden;
}
.index-board-item {
  float: left;
  width: 400px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
  padding: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.index-board-item-inner {
  min-height: 125px;
  padding-left: 120px;
}

.index-board-item h2 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}
.index-board-car .index-board-item-inner{
  background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner{
  background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner{
  background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
  background: url(../assets/images/4.png) no-repeat;
}

.line-last {
  margin-right: 0;
}
.index-board-button {
  margin-top: 20px;
  width:80px;
  height:30px;
  line-height:30px;
  text-align:center;
  color:#fff;
  background-color:#4fc08d;
}

.lastest-news {
  min-height: 512px;
}
.new-item {
  display: inline-block;
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>